<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03_浮动小练习</title>
    <style>
        .outer {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 1px solid black;
            margin: 10px;
            float: left;
        }
        .box1 {
            height: 230px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>
    <div style="background-color: green;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, voluptas expedita soluta autem tempora repellendus, ex quia facilis aperiam, amet hic ipsa repellat fugit reprehenderit? Alias dignissimos fugiat obcaecati officiis veritatis. Suscipit repellendus quam earum. Deleniti, temporibus unde? Ex repellendus unde temporibus. Sunt ducimus quos numquam fugit, necessitatibus similique dignissimos voluptates alias rem error doloremque ullam perferendis recusandae at laboriosam cumque impedit molestiae sint velit, dolor consequatur. Accusantium dolores quaerat tempora sint nam eius pariatur sunt. Alias libero repellendus culpa placeat officiis ea provident aliquid distinctio. Numquam sequi nemo impedit inventore, aperiam explicabo ipsum esse pariatur nisi magnam, eius vitae.</div>
</body>
</html>